import React from "react";
import {flushSync} from "react-dom";

class SetStateFlushSync extends React.Component {
    state = {
        x: 1,
        y: 1,
        z: 1
    }

    handlerClick = () => {
        //箭头函数this指向实例【宿主环境】
        let {x, y, z} = this.state;


        flushSync(() => {
            this.setState({
                x: this.state.x + 1
            })

            this.setState({
                y: this.state.y + 1
            })
        });
        //setState是异步的，如果不加flushSync则取不到最新的state
        this.setState({
            z: this.state.x + this.state.y
        })
    }

    render() {
        return (

            <div>
                <div>
                    x:{this.state.x} y:{this.state.y} z:{this.state.z}
                </div>
                <button onClick={this.handlerClick}></button>
            </div>
        )
    }
}

export default SetStateFlushSync;